<template>
	<page  ref='page'>
		<!-- 修改个人资料 wwl-->
		<view class="tabber_box">
			<view class="tabber_box_static" :style="{ height: `${getters.statusBarHeight}px` }"></view>
			<view class="tabber_box_flex" :style="{ height: `${getters.statusBarHeight}px` }"></view>
		</view>
		<view class="tabber_box_title_static">
		</view>
		<view class="tabber_box_title_flex" :style="{ top: `${getters.statusBarHeight}px` }">
			<view class="left" @click="onBack()">
				<n-icon name="back" size="40" color='#fff'></n-icon>
			</view>
			<view class="text">
				修改个人资料
			</view>
		</view>
		<view class="img_box">
			<view class="top">
				<image class="img" :src="personalInfo.avatar" @click="$global.onPreview(personalInfo.avatar)" mode="scaleToFill" v-if=' personalInfo && personalInfo.avatar '></image>
				<image  class="img" src="https://xiaoqu.wuguoxin.vip/uploads/web/user.png" mode="" v-else></image>
				<image class="icon" src="https://xiaoqu.wuguoxin.vip/uploads/web/icon03.png" mode=""  @click.stop="onUpdatePhoto()"></image>
			</view>
			<view class="text" @click="onUpdatePhoto()">更改头像</view>
		</view>
		<view class="info_list">
			<view class="row">
				<text class="left">更改姓名</text>
				<view class="right">
					<input type="text" v-model="personalInfo.name" class="input" maxlength="10" />
				</view>
			</view>
			<!-- <view class="row" @click="onUseridentity()" v-if="personalInfo.type == 4">
				<text class="left">申请成为商户</text>
				<view class="right">
					<text v-if="personalInfo.project_status == 0">去完善</text>
					<text v-if="personalInfo.project_status == 1">资料校验中</text>
					<text v-if="personalInfo.project_status == 2">待账户验证</text>
					<text v-if="personalInfo.project_status == 3">审核中</text>
					<text v-if="personalInfo.project_status == 4">已驳回，重新填写</text>
					<text v-if="personalInfo.project_status == 5">待签约</text>
					<text v-if="personalInfo.project_status == 6">已完善</text>
					<text v-if="personalInfo.project_status == 7">已冻结</text>
					<text v-if="personalInfo.project_status == 8">已作废</text>
					<n-icon name="right" size="38" color='#999' v-if="personalInfo.project_status == 0 || personalInfo.project_status == 4"></n-icon>
				</view>
			</view> -->
			<view class="row" @click="onCancellation()">
				<text class="left">注销账户</text>
				<view class="right">
					<n-icon name="right" size="38" color='#999'></n-icon>
				</view>
			</view>
			<view class="row" @click="onInviteIn()" v-if="personalInfo.type == 2">
				<text class="left">邀请入驻</text>
				<view class="right">
					<n-icon name="right" size="38" color='#999'></n-icon>
				</view>
			</view>
			
			
			<!-- <view class="row" @click="checkChange">
				<view class="left text" >定向推荐开关<view class="kaiguan" >({{checked ? '开': '关' }})</view></view>
				
				<view class="right">
					<view class="Template_detail_shopbtn_text_btn2"  >
						
						<view class="Template_detail_shopbtn_text_btn2_view" :class="checked?'upactive':''">
								<view class="Template_detail_shopbtn_text_btn2_view2" :class="checked?'activecss':''"></view>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			
			<view class="row" @click="onClose()">
				<text class="left tuichu">退出登录</text>
				<view class="right">
					<n-icon name="right" size="38" color='#999'></n-icon>
				</view>
			</view>
			<view class="row" @click.stop="onAgreement('用户注册协议',2)">
				<text class="left text" >《用户注册协议》</text>
				<view class="right">
					<n-icon name="right" size="38" color='#999'></n-icon>
				</view>
			</view>
			<view class="row" @click.stop="onAgreement('隐私协议',3)">
				<text class="left text" >《隐私协议》</text>
				<view class="right">
					<n-icon name="right" size="38" color='#999'></n-icon>
				</view>
			</view>
			
		</view>
		<view class="bottom_box">
			<button class="btn1" @click="onBack()">取消</button>
			<button class="btn2" :loading='loading' @click="onSave()">确认保存</button>
		</view>
	</page>
</template>

<script>
	import { setUserInfo } from './static/api.js'
	import {
		getUserInfo
	} from '@/utils/getRequest.js'
	export default {
		name:"mycheckbox",
		data() {
			return {
				personalInfo: {
					avatar: '',
					name: '',
				},
				checked:1,
				loading: false,
			}
		},
		methods: {
			checkChange(){
				uni.showToast({title:'点击开关后需保存才会生效',icon:'none'})
				if(this.checked == 0){
					this.checked=1;
				}else{
					this.checked=0;
				}
				
				this.$emit("checkChange");
			},
			onAgreement(title, type) {
				uni.navigateTo({
					url: `/pagesHome/richTextDetails?title=${title}&type=${type}`
				})
			},
			onClose(){
				uni.showModal({
					title: '提示',
					content: '是否确认退出登录吗？',
					success:async (res)=>{
						if (res.confirm) {
							this.$store.commit('setToken',null)
							// uni.removeStorageSync('TZ_token')
							this.$store.commit('setUser',null)
							// uni.removeStorageSync('TZ_userInfo')
							this.$store.commit('setInvitationCode', null)
							// uni.removeStorageSync('TZ_invitation_code')
							uni.showToast({
								title:'退出成功',icon:'none'
							})
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/index/index'
								})
							},500)
					  }
					}
				})
			},
			onInviteIn(){
				uni.navigateTo({
					url:'/pagesMy/inviteIn/index'
				})
			},
			onBack() {
				uni.navigateBack()
			},
			onUpdatePhoto(){
				uni.chooseImage({
					count: 1,
					success: res => {
						this.$upload(res.tempFilePaths[0]).then(result =>{
							if(result.code == 200){
								this.personalInfo.avatar = result.data.img 
							}
						}).catch(err=>{
						})
					},
					fail :err=>{
					}
				})
			},
			onUseridentity(){
				
					var status = this.personalInfo.project_status;
					var merchant_status = this.personalInfo.merchant_status;
					if(status == 0){
						uni.navigateTo({
							url:'/pagesMy/useridentity/index?status='+status+'&type=1&merchant_status='+merchant_status
						})
					}else if(status == 1){
						uni.showToast({title:'资料校验中',icon:'none'})
					}else if(status == 2){
						uni.navigateTo({
							url:'/pagesMy/useridentity/index?status='+status+'&type=1&merchant_status='+merchant_status
						})
					}else if(status == 3){
						uni.showToast({title:'审核中',icon:'none'})
					}else if(status == 4){
						uni.showToast({title:'已驳回',icon:'none'})
						uni.navigateTo({
							url:'/pagesMy/useridentity/index?status='+status+'&type=1&merchant_status='+merchant_status
						})
					}else if(status == 5){
						uni.navigateTo({
							url:'/pagesMy/useridentity/index?status='+status+'&type=1&merchant_status='+merchant_status
						})
					}else if(status == 6){
						uni.navigateTo({
							url:'/pagesMy/useridentity/index?status='+status+'&type=1&merchant_status='+merchant_status
						})
					}else if(status == 7){
						uni.showToast({title:'已冻结',icon:'none'})
					}else if(status == 8){
						uni.showToast({title:'已作废',icon:'none'})
					}
				
			},
			
			async onSave() {
				if(this.loading) return
				if(!this.personalInfo.name) return uni.showToast({
					title:"请输入姓名",icon:"none"
				})
				this.loading = true
				try{
					var res = await setUserInfo({avatar:this.personalInfo.avatar,name:this.personalInfo.name,recommend_status:this.checked})
					uni.showToast({
						title: "保存成功"
					})
					this.loading = false
					this.$store.commit('setUser',res)
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}catch(err){
					this.loading = false
				}
				
			},
			onCancellation(){
				uni.navigateTo({
					url:'/pagesMy/cancellation'
				})
			},
			async getInfoUser(type) {
				try {
					var result = await getUserInfo()
					this.$store.commit('setUser', result)
					// uni.setStorageSync('TZ_userInfo', result)
					this.personalInfo =  Object.assign({},result)
					this.checked = result.recommend_status;
				} catch (err) {
				}
			},
		},
		onLoad(params) {
			this.personalInfo = Object.assign({},this.$store.state.userInfo)
			this.getInfoUser()
		},
	}
</script>

<style lang="scss" scoped>
	.Template_detail_shopbtn_text_btn2 {
	   	width: 100%;
	   
	   }
	   .Template_detail_shopbtn_text_btn2_view {
	   	width: 35px;
	   	height: 18px;
	   	background: #666666;
	   	border-radius: 18px;
	   	// margin-left: 20px;
		display: inline-block;
	   }
	   
	   .Template_detail_shopbtn_text_btn2_view2 {
	   	width: 15px;
	   	height: 15px;
	   	background: #F0F0F0;
	   	border-radius: 15px;
	   	float: right;
	   	margin-top: 1px;
	   }
	   .upactive{
		   background: #FCD1E0 !important;
	   }
	   .activecss{
		   background: #FE928C!important;
		   float: left !important;
			
	   }
	   .kaiguan{
		   display: inline;
	   }
	   .tuichu{
		   // margin-left: 20px;
	   }
	
	
	.tabber_box .tabber_box_static {
		width: 100%;
		background-color: #36353a;
	}

	.tabber_box .tabber_box_flex {
		width: 100%;
		background-color: #36353a;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
	}

	.tabber_box_title_static {
		height: 130rpx;
		width: 100%;
		background-color: #36353a;
	}

	.tabber_box_title_flex {
		background-color: #36353a;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 99;
		height: 136rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		text-align: center;
		color: #fff;

		.left {
			position: absolute;
			left: 38rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.img_box {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 16rpx;
		padding-bottom: 52rpx;
		background-color: #36353a;
		margin-bottom: 100rpx;
		.top {
			position: relative;
			margin-bottom: 28rpx;
		}

		.img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
		}

		.icon {
			position: absolute;
			right: 20rpx;
			bottom: 0;
			width: 42rpx;
			height: 42rpx;
		}

		.text {
			font-size: 28rpx;
			color: #ADADAD;
			line-height: 40rpx;

		}
	}

	.info_list {
		margin-top: 100prx;
		padding: 0 40rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.row {
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		line-height: 40rpx;
		color: #26252B;
		margin-bottom: 60rpx;
		width: 100%;

		.text{
			width: 100%;
		}
		.right {
			text-align: right;
			width: calc(100% - 6em);

			.input {
				width: 100%;
				text-align: right;
				color: #ADADAD;
			}
		}
	}

	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		font-size: 32rpx;
		button[loading]::before {
			align-self: center
		}
		button {
			display: flex;
			justify-content: center;
			align-item: center;
			padding: 0;
			border-radius: 0;
		}

		button::after {
			border: none;
		}

		.btn2 {
			width: 482rpx;
			height: 104rpx;
			line-height: 104rpx;
			text-align: center;
			background: #fe7a1f;
			color: #fff;
			font-size: 32rpx;
		}

		.btn1 {
			width: 268rpx;
			height: 104rpx;
			background: #e8e8e8;
			line-height: 104rpx;
			text-align: center;
			color: #ADADAD;
			font-size: 32rpx;
		}

	}
</style>
